<template>
	<div class="typeedit">
		<div class="typeedit_header">
			<span>类型管理</span>
			<button @click="add()">
				添加新的轮播图
			</button>
		</div>
		<div class="typeedit_bottom">
			<ul>
				<li>
					<p>描述</p>
					<p>热度</p>
					<p>类型</p>
					<p>图片</p>
					<p>操作</p>
				</li>
				<li v-for="(item,index) in list" :key="item.id">
					<p>{{item.memo}}</p>
					<p>{{item.hot}}</p>
					<p>{{item.type}}</p>
					<p><img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" /></p>
					<p><button @click="del(index)">删除</button></p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default{
	name:'Typeedit',
	data(){
		return{
			list:[],
		}
	},
	methods:{
		add(){
			this.$router.push('/admin/banner');
		}
	},
	// 组件创建之后
	created() {
		this.axios.get('/api/adm/hot/findAll').then( (res)=>{
			// 请求成功
			if(res.status === 200){
				this.list = res.data.data;
			}
		}).catch( (error)=>{
			console.log(error);
		})
	}
}
</script>

<style scoped>
.typeedit_header{
	border: 1px solid black;
	line-height: 80px;
}
.typeedit_header span{
	font-size: 20px;
	font-weight: bold;
}
.typeedit_header button{
	float: right;
	height: 23px;
	width: 100px;
	margin-top: 25px;
	font-size: 10px;
}
.typeedit_bottom ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.typeedit_bottom ul li{
	width: 100%;
	float: left;
}
.typeedit_bottom ul li p{
	border: 1px solid black;
	float: left;
	width: 19.5%;
	height: 100px;
}
.typeedit_bottom ul li:nth-child(1){
	line-height: 30px;
	height: 50px;
}
.typeedit_bottom ul li img{
	width: 100%;
	height: 100%;
}
</style>
